<template>
   <view>
      <view class="empty" v-if='list.length === 0 '>
         <image
            src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.51yuansu.com%2Fpic3%2Fcover%2F01%2F82%2F40%2F596fa6dc00bb4_610.jpg&refer=http%3A%2F%2Fpic.51yuansu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1633499781&t=d37222e32213957ddbdd01d62e071309"
            mode="widthFix" style="width: 400rpx;"></image>
         <view class="empty-text">空空如也的购物</view>
         <view class="empty-button" @click="goCate">去选购</view>
      </view>
      <view>
         <view class="goods-detail" v-for="item,index in list" :key="index">
            <view class="detail-left">
               <view class="goods-left">
                  <checkbox-group>
                     <label >
                        <!-- 商品的选中按钮 -->
                        <radio :checked="item.checked" color="#c00000" @click="radioChangeHandler(item) ">
                        </radio>
                        <!-- <checkbox class="selected" color="#555555" :checked="item.checked" @tap='selectedItem(index)' /> -->
                     </label>
                  </checkbox-group>
                  <image :src="item.goodsImage" style="width: 150rpx;height: 140rpx;"></image>
               </view>
               <view class="size">
                  <text style="font-size: 25rpx;">尺码：{{item.size}}</text>
                  <text class="goods-price">￥{{item.price}}/件</text>
               </view>
            </view>
            <view class="detail-right">
               <!-- 减少一件的按钮 -->
               <text class="subtract" @click="Tosub(item)">-</text>
               <!-- 单间商品的数量 -->

               <text class="num">{{item.num}}</text>
               <!-- 增加一件的按 -->
               <text class="add" @click="Toadd(item)">+</text>
            </view>
            <button class="delete" @click='deleteFn(item)'>删除</button>
         </view>
         <!-- 删除 -->
      </view>
      <view class="end" v-for="item in list" :key="item.id">
         <view class="end-left">
            <radio :checked="isFullCheck" color="#c00000" @click="changeAllState">全选
            </radio>
            <view>
               <!-- 总金额 -->
               总计：<text style="color: #f00;font-weight: bold;">¥{{checkedGoodsAmount}}</text>
            </view>
         </view>
         <view class="end-right">
            结算({{checkedCount}})
         </view>
      </view>
   </view>
</template>

<script>
   // 导入辅助函数并映射到当前页面
   import {
      mapState,
      mapActions,
      mapGetters,
      mapMutations
   } from 'vuex'
   export default {
      data() {
         return {
            focusState: true,
           
            showNum: {
               type: Boolean,
               default: false
            },
            //滑动删除的组件配置
            options: [{
               //删除区域的内容
               text: '删除',
               //文本的样式
               style: {
                  backgroundColor: '#dd524d'
               }
            }]
         };
      },
      computed: {
         // 调用辅助函数对应模块里的方法
         // 第一个cart代表是cart模块， 第二个list代表是cart模块下的State里面的数据或者方法
         ...mapState('cart', ['list']),
         ...mapGetters('cart', ['checkedCount', 'total', 'checkedGoodsAmount']),
         isFullCheck() {
            return this.total === this.checkedCount
         }
      },
      methods: {
         // 调用辅助函数对应模块里的方法
         // 第一个cart代表是cart模块， 第二个checkedAllFn代表是cart模块下的Actions里面的方法
         ...mapActions('cart', []),
         ...mapMutations('cart', ['updateGoodsState', 'updateGoodsCount', 'removeGoodsById', 'updateAllGoodsState',
            'ToaddT'
         ]),
         goCate() {
            uni.switchTab({
               url: '/pages/cate/cate'
            })
         },
         radioChangeHandler(item) {
            // console.log(index);
            // console.log(item.id);
            // console.log(item.checked);
            item.checked = !item.checked
            this.updateGoodsState(item)
         },
         // 删除方法
         deleteFn(item) {
            // console.log(item);
            this.removeGoodsById(item.id)
         },
         // 全选和反全选
         changeAllState() {
            // console.log(!this.isFullCheck);
            // 把最新的状态传入进去 this.updateAllGoodsState
            this.updateAllGoodsState(!this.isFullCheck)
         },
         // 减少一件商品
         Tosub(item) {
            if (item.num > 1) {
               item.num--
            } else if (item.num = 1) {
               uni.showToast({
                  title: "该商品不能在减少了"
               })
            }
            this.updateGoodsCount(item)
         },
         // 增加一件商品
         Toadd(item) {
            if (item.num < 10) {
               item.num++
            } else if (item.num > 1) {
               item.num = 10
               uni.showToast({
                  title: "单件商品最多添加到10件"
               })
            }
            this.updateGoodsCount(item)
         }
      }
   }
</script>

<style lang="scss">
   .goods {
      line-height: 80rpx;
      background-color: #FFFFFF;

      &-detail {
         display: flex;
         padding: 30rpx 15rpx 30rpx 30rpx;
         background-color: #fff;
         justify-content: space-between;
         border-bottom: 5rpx solid #F1F1F1;
         align-items: center;

         .detail-left {
            display: flex;

            .goods-left {
               display: flex;
               align-items: center;
            }
         }

         .size {
            display: flex;
            justify-content: space-around;
            flex-direction: column;
            margin-left: 30rpx;

            .goods-price {
               font-size: 25rpx;
               color: #F44545;

            }
         }

         .detail-right {
            display: flex;

            text {
               width: 10rpx;
               line-height: 50rpx;
               text-align: center;
               display: inline-block;
               background-color: #F7F7F7;
               margin-right: 10rpx;
            }

            .add {
               color: #FA4305;
               border-radius: 10rpx 30rpx 30rpx 10rpx;
               margin-right: 20rpx;
               width: 25px;
               background-color: #c9d7cd;
               margin-left: 20px;
            }

            .subtract {
               color: #FA4305;
               border-radius: 30rpx 10rpx 10rpx 30rpx;
               width: 25px;
               background-color: #c9d7cd;
               margin-right: 20px;
            }
         }
      }
   }

   .delete {
      background-color: #c9d7cd;
      color: #F44545;
      font-size: 16px;
      margin-right: 0;
      margin-left: 5rpx;
      position: relative;
      width: 150rpx;
      border-radius: 0;
   }

   .empty {

      position: relative;
      top: 220rpx;
      text-align: center;
      display: flex;
      align-items: center;
      flex-direction: column;

      &-text {
         color: #808080;
         margin-bottom: 50rpx;
      }

      &-button {
         width: 300rpx;
         height: 90rpx;
         color: orange;
         border: 1rpx solid orange;
         text-align: center;
         line-height: 90rpx;
         border-radius: 48rpx;
         margin-right: 5px;
      }
   }

   .end {

      width: 100%;
      height: 50rpx;
      background-color: #fff;
      position: fixed;
      bottom: 130rpx;
      left: 0;
      display: flex;
      align-items: center;

      &-left {
         // margin-top: 50rpx;
         width: 70%;
         display: flex;
         justify-content: space-between;
         padding: 0 30rpx;

         .end-flex {
            display: flex;
            align-items: center;
         }
      }

      &-right {
         width: 30%;
         line-height: 90rpx;
         background-color: #F44545;
         text-align: center;
         color: #fff;
         margin-right: 20rpx;
      }
   }
</style>
